<template>
  <v-menu
    v-model="showMenu"
    :close-on-content-click="false"
    :offset-y="true"
    style="padding: 0;font-size: 18px"
  >
    <template v-slot:activator="{ on, attrs }">
      <v-icon v-bind="attrs" v-on="on" @click="showMenu = true;" style="margin-top: -33px">mdi-format-size</v-icon>
    </template>

    <v-list dense style="padding: 0;text-align: center;margin: 0 auto">
      <v-list-item-group>
        <v-list-item v-for="(item, index) in sizeOptions">
          <v-list-item-title :key="item.value" @click="handleSetSize(sizeOptions[index])" :disabled="size === item.value">{{ item.label }}</v-list-item-title>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-menu>
</template>

<script>
export default {
  data() {
    return {
      showMenu: false,
      sizeOptions: [
        { label: 'Default', value: 'default' },
        { label: 'Medium', value: 'medium' },
        { label: 'Small', value: 'small' },
        { label: 'Mini', value: 'mini' }
      ]
    }
  },
  computed: {
    size() {
      return this.$store.getters.size
    }
  },
  methods: {
    handleSetSize(size) {
      this.$ELEMENT.size = size
      this.$store.dispatch('app/setSize', size)
      this.refreshView()
      this.$message({
        message: 'Switch Size Success',
        type: 'success'
      })
    },
    refreshView() {
      // In order to make the cached page re-rendered
      this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
      const { fullPath } = this.$route
      this.$nextTick(() => {
        this.$router.replace({
          path: '/redirect' + fullPath
        })
      })
    }
  }

}
</script>
